<template>
  <!-- 关联随附单据 -->
  <div>
    <el-button
      v-if="dialogType != 'detail'"
      type="success"
      plain
      @click="handleAdd"
      size="mini"
      icon="el-icon-plus"
      style="margin-top: 15px"
    >添加单据
    </el-button
    >
    <!-- 附件列表 -->
    <el-table min-height="600" :data="submitCertList" size="mini" style="margin-top: 15px">
      <el-empty
        slot="empty"
        :image="require('@/assets/images/empty.png')"
        :image-size="80"
      ></el-empty>
      <el-table-column prop="platSeqNo" label="证书预备案编号"></el-table-column>
      <el-table-column
        prop="fileName"
        label="文件名称"
        min-width="100"
      ></el-table-column>
      <el-table-column prop="suffix" label="附件类型"></el-table-column>
      <el-table-column prop="fileSize" label="文件大小"></el-table-column>
      <el-table-column
        prop="uploadTime"
        label="上传时间"
        min-width="100"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="120" v-if="dialogType != 'detail'">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, selectedList)"
            type="text"
            size="mini"
            class="deleteBtn"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 勾选随附单证弹窗 -->
    <el-drawer
      title="选择单证"
      :visible.sync="showDrawer"
      :destroy-on-close="true"
      append-to-body
      size="50%"
      direction="rtl">
      <div class="table-item">
        <el-table id="vehicleTable" ref="goodSelectTable" :data="tableData" size="mini" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="selectable" width="45">
          </el-table-column>
          <el-table-column label="证书预备案编号" align="center" prop="platSeqNo"/>
          <el-table-column label="证书名称" align="center" prop="fileName" min-width="100"/>
          <el-table-column prop="suffix" label="附件类型"></el-table-column>
          <el-table-column prop="fileSize" label="文件大小"></el-table-column>
          <el-table-column prop="uploadTime" label="上传时间" width="160"></el-table-column>
        </el-table>
        <!-- <pagination size="mini" v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList"/> -->
      </div>
      <el-button class="filter-item filter-item2" style="margin-top: 20px;" type="success" icon="el-icon-check" @click="sureCert" size="small">
        确定
      </el-button>
    </el-drawer>
  </div>
</template>

<script>
import {certPreRecordDetail} from "@/api/bt/bmhs";

export default {
  props: {
    certPutrecNo: {
      type: String
    },
    detailData: {
      type: Object,
      default: () => {
      }
    },
    dialogType: {
      type: String,
      default: "add"
    }
  },
  dicts: ["bt_vehicle_type"],
  data() {
    return {
      tableData: [],
      selectedList: [],
      submitCertList: [],
      showDrawer: false,
      searchValue: "",
    };
  },
  computed: {
    selectedIds() {
      return this.submitCertList.map((item) => item.id);
    },
    certCheckedList() {
      return this.submitCertList.map((item) => {
        return {
          certCode: item.platSeqNo,
          fileName: item.fileName,
          fileSize: item.fileSize,
          name: item.name,
          suffix: item.suffix,
        };
      });
    },
  },
  watch: {
    "detailData.ecsList": {
      immediate: true,
      handler(val) {
        if (val) {
          this.submitCertList = this.detailData.ecsList.map(item => {
            return {
              id: item.id,
              certCode: item.platSeqNo,
              fileName: item.fileName,
              fileSize: item.fileSize,
              name: item.name,
              suffix: item.suffix,
            };
          });
        }
      }
    },
    "detailData.attachDocList": {
      immediate: true,
      handler(val) {
        if (val) {
          this.submitCertList = this.detailData.attachDocList.map(item => {
            return {
              ...item,
              platSeqNo: item.certCode,
            };
          });
        }
      }
    },
  },
  methods: {
    handleAdd() {
      this.selectedList = [];
      this.showDrawer = true;
      this.getList();
    },
    getList() {
      this.loading = true;
      certPreRecordDetail(this.certPutrecNo)
        .then((resp) => {
          this.tableData = resp.data.formPdqFiles;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    editGoodItem(row) {
      this.$set(row, "isEdit", true);
    },
    saveGoodItem(row) {
      this.$set(row, "isEdit", false)
    },
    deleteGoodItem(index, rows) {
      rows.splice(index, 1);
    },
    // 勾选证书
    handleSelectionChange(val) {
      this.selectedList = val;
    },
    //选择复选框控制哪些数据可以编辑
    selectable(row, index) {
      if (this.selectedIds.includes(row.id)) {
        return false;
      } else {
        return true;
      }
    },
    sureCert() {
      this.submitCertList = this.submitCertList.concat(this.selectedList);
      this.showDrawer = false;
    },
    deleteRow(index, rows) {
      this.submitCertList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.common-addBtn {
  margin-bottom: 10px;
}

.searchBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;

  ::v-deep .el-button--primary {
    padding: 5px 10px;
    border-radius: 5px;
  }

  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}

::v-deep .el-empty {
  padding: 10px 0;
}

::v-deep .el-empty__description {
  margin-top: 0;

  p {
    font-size: 12px;
  }
}
</style>
